import React, {Component, Fragment} from 'react';
import { Row, Col, Divider, Button} from 'antd';
import '../style/index.scss'
import { Link } from 'react-router-dom';


class ContractCom extends Component {
    constructor(props){
        super(props)
        this.state={
            title:"CONTACT",
            divider:"联 系 · 我",
            dec:" 简单做人，用心做事",
            btnName:"我的博客",
            userInfo:{
                username:"GodenFreeman",
                email:"Sonic25257758@163.com",
                wechat:"1587932054"
            }
        }
    }

    render(){
        return (
            <Fragment>
                <Row type={'flex'} justify={'center'}>
                    <Col xs={{span:24}} md={{span:16}}>
                        {/* <Row>&nbsp;</Row> */}
                        <Row>
                            <h1 className="tit_about">{this.state.title}</h1>
                        </Row>
                        <Row>
                            <Divider style={{fontSize: 30, fontWeight:"lighter"}}>{this.state.divider}</Divider>
                        </Row>
                        <Row>
                            <h4 className="tit_dec">{this.state.dec}</h4>
                        </Row>
                        <Row>
                            <Col xs={{span:12}} md={{span:6, offset:6}} style={{textAlign:'center'}} >
                                <img src={this.props.ewm} className='ewm' alt={"img"} /> 
                            </Col>
                            <Col xs={{span:12}} md={{span:12}} >
                                <Row >
                                    <Col xs={{span:24}} md={{span:24}}>{this.state.userInfo.username}</Col>
                                    <Col xs={{span:24}} md={{span:24}}><i className="fa fa-envelope"></i>&nbsp;&nbsp;E-mail&nbsp;&nbsp;: </Col>
                                    <Col xs={{span:24}} md={{span:24}}>{this.state.userInfo.email}</Col>
                                    <Col xs={{span:24}} md={{span:24}}><i className="fa fa-qq"></i>&nbsp;&nbsp;QQ&nbsp;&nbsp;：</Col>
                                    <Col xs={{span:24}} md={{span:24}}>{this.state.userInfo.wechat}</Col>
                                </Row>
                            </Col>
                        </Row>
                        <Row>&nbsp;</Row>
                        <Row type={'flex'} justify={'center'} >
                            <Col xs={{span:24}} md={{span:4}}>
                                <Button type="primary" size={"large"} block><Link to={"/blog"}><i className="fa fa-plus"></i>&nbsp;&nbsp;&nbsp;&nbsp;{this.state.btnName}</Link></Button>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Fragment>
        )
    }
}

export default ContractCom
